<template>
    <!-- html -->
    <div class="ShallowRef_Reactive">
        <h3>和：{{ sum }}</h3>
        <h3>{{ person.name }}</h3>
        <h3>{{ person.age }}</h3>
        <h4>车：{{ car }}</h4>
        <button @click="changeSum">sum+1</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        <button @click="onchangeBrand">修改品牌</button>
        <button @click="onchangeClolor">修改颜色</button>
        <button @click="onchangeEagin">修改发动机</button>
        <button @click="onchangeCar">修改整个车</button>
    </div>
</template>

<script lang="ts" setup name="ShallowRef_Reactive">
import { ref, shallowRef, reactive, shallowReactive } from 'vue'

//shallowRef 浅层次的ref,只处理第一层的响应式 sum.value person.value 为第一层对象第一层
let sum = shallowRef(10)
let person = shallowRef({
    name: '张三',
    age: 18
})


//车
let car = shallowReactive({
    brand: '奔驰',
    option: {
        red: '红色',
        engin: 'v8'
    }
})

// let sum = ref(10)
// let person = ref({
//     name: '张三',
//     age: 18
// })
function changeSum() {
    sum.value += 1
}
function changeName() {
    person.value.name += "x"
}
function changeAge() {
    person.value.age += 1
}
function changePerson() {
    person.value = {
        name: '张三',
        age: 28
    }
}

//shallowReactive 浅层次的reactive ,只处理第一层的响应式 car.brand car.option 为第一层对象第一层
function onchangeBrand() {
    car.brand += "x"
}
function onchangeClolor() {
    car.option.red += "s"
}
function onchangeEagin() {
    car.option.engin += "w"
}
//shallowReactive 浅层次的reactive ,只处理第一层的响应式 car.brand car.option 为第一层对象第一层
function onchangeCar() {
    Object.assign(car, {
        brand: '宝马',
        option: {
            red: 'blue',
            engin: 'v3'
        }
    })
}
</script>

<style scoped>
/* 样式 */
.ShallowRef_Reactive {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
}
</style>